<template>
    <view class="page">
        <!-- 导航栏 -->
        <u-navbar autoBack placeholder>
            <view slot="center" class="narInput">
                <u--input
                    shape="circle"
                    border="none"
                    placeholder="请输入关键字"
                    prefixIcon="search"
                    prefixIconStyle="font-size: 40rpx;color: #909399"
                />
            </view>
        </u-navbar>
        <!-- 地址栏 -->
        <addressCard ref="addressCard" class="addressCard" borderBottom/>
        <!-- 菜单栏目 -->
        <u-tabs
            :list="tabsList"
            :activeStyle="{color: '#151515', fontSize: '32rpx', fontWeight: '500'}"
            :inactiveStyle="{color: '#666666', fontSize: '30rpx', fontWeight: '500'}"
            keyName="cateName"
            lineWidth="30rpx"
            :lineColor="$uni-color-primary"
            @click="tabsClick"
        />
        <!-- 分类列表 -->
        <categoryList class="list" :classList="classList" />
    </view>
</template>

<script>
    import { categoryList } from "./components/categoryList.vue"
    import { addressCard } from "@/components/addressCard.vue"
	export default {
        components: {
            categoryList,
			addressCard
        },
        data() {
            return {
                address: '1',
                tabsList: [],
                classList: []
            };
        },
        created() {
            this.getTabsList()
        },
		onShow() {
			if (uni.getStorageSync('chooseAddress')) {
				this.$refs.addressCard.address = uni.getStorageSync('chooseAddress')
			} else if (uni.getStorageSync('userAddress')) {
				this.$refs.addressCard.address = uni.getStorageSync('userAddresss')
			}
		},
		onUnload() {
			uni.removeStorage({
				key: 'chooseAddress'
			})
		},
        methods: {
            // 点击菜单分类
            tabsClick(item) {
                this.classList = item.children
            },
            getTabsList() {
                uni.showLoading({
                    title: '加载中'
                })
                this.$http(`/api/category`).then(res => {
                    this.tabsList = res.data
                    this.classList = res.data[0].children
                    uni.hideLoading()
                }).catch(() => {
                    uni.hideLoading()
                })
            }
        }
    };
</script>
<style scoped lang="scss">
    .page {
        background-color: $uni-bg-color-grey;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        ::v-deep .u-navbar__content {
            justify-content: flex-start !important;
            .u-input {
                padding: 9rpx !important;
                background-color: $uni-bg-color-grey;
            }
        }
        .narInput {
            margin-left: 100rpx;
            width: 430rpx;
        }
        .addressCard {
			background-color: $uni-bg-color;
			padding: 0 30rpx;
		}
		::v-deep .u-tabs {
			background-color: $uni-bg-color;
		}
        .list {
            flex: 1;
            padding-top: 20rpx;
            overflow-y: hidden;
        }
    }
</style>